<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<style type="text/css">

</style>

	<%-- 列表区域 --%>
		<div style="float: left;width: 100%;height: 40px;line-height: 40px;background-color: orange;">
			<div style="float: left;width: 64px;height: 40px;line-height: 40px;text-align: center;border-right: 1px solid gray;cursor: pointer;">新鲜事</div>
			<div style="float: left;width: 64px;height: 40px;line-height: 40px;text-align: center;border-right: 1px solid gray;cursor: pointer;">最热话题</div>
			<div style="float: left;width: 64px;height: 40px;line-height: 40px;text-align: center;border-right: 1px solid gray;cursor: pointer;">我的话题</div>
			<div style="float: left;width: 64px;height: 40px;line-height: 40px;text-align: center;border-right: 1px solid gray;cursor: pointer;">关注的人</div>
		</div>
		<div id="indexArticleListDiv" style="float: left;width: 100%;height: 590px;overflow: hidden;border: 1px solid blue;">
						
		</div>	

<script type="text/javascript">

//
//---------------------------------------- 全局变量 ------------------------------------------------
//


var partArticleListMethod_selectArticleImplementation = function() { alert("partArticleListMethod_selectArticleImplementation is not registered"); };
var partArticleListMethod_registerCallbackWhenArticleSelected = function() { alert("partArticleListMethod_registerCallbackWhenArticleSelected is not registered"); };
var partArticleListMethod_registerGetArticleCatagory = function() { alert("partArticleListMethod_registerGetArticleCatagory is not registered"); };

<%
	String methodName_selectArticleImplementation = request.getParameter("methodName_selectArticleImplementation");
	String methodName_registerCallbackWhenArticleSelected = request.getParameter("methodName_registerCallbackWhenArticleSelected");
	String methodName_registerGetArticleCatagory = request.getParameter("methodName_registerGetArticleCatagory");
	
	if (methodName_selectArticleImplementation != null) {
%>
		partArticleListMethod_selectArticleImplementation = <%= methodName_selectArticleImplementation %>;
<%
	}

	if (methodName_registerCallbackWhenArticleSelected != null) {
%>
		partArticleListMethod_registerCallbackWhenArticleSelected = <%= methodName_registerCallbackWhenArticleSelected %>;
<%
	}
	
	if (methodName_registerGetArticleCatagory != null) {
%>
		partArticleListMethod_registerGetArticleCatagory = <%= methodName_registerGetArticleCatagory %>;
<%		
	}
%>

//
//---------------------------------------- 自动执行代码 ------------------------------------------------
//


// 注册话题列表获取成功后的回调方法
partArticleListMethod_registerCallbackWhenArticleSelected(updateWhenArticleSelected);

// 注册获取话题搜索位置范围的回调方法
partArticleListMethod_registerGetArticleCatagory(getArticleCatagory);

// 另外，当用户选择某个分类时，触发method_selectArticleImplementation()


//
//---------------------------------------- 对外公开的函数 ------------------------------------------------
//

// 暂无


//
//---------------------------------------- 私有函数 ------------------------------------------------
//

function getArticleCatagory() {
	//临时方案，以后应该修改为，获取用户选择的话题分类。
	return "LastArticles";
}



//更新Article List
function updateWhenArticleSelected(dataSet) {
				var data = dataSet.list;
				if (data.length > 0) {
					var articleSummary="";
					for(var i=0;i<data.length;i++) {
						var item = data[i];
						articleSummary += 
							'<div class="indexArticleItemDiv">'+
								'<div style="float: left;width: 100%;height: 45px;">'+
									'<div style="float: left;width: 40px;border: 2px solid #CCCCCC;">'+
										'<img alt="" width="100%" height="100%" src="' + 'images/default/default_head_img.gif' + '">'+
									'</div>'+
									'<div style="float: left;width: 205px;height: 50px;">'+
										'<div class="indexArticleItemTitleDiv">'+
											'<a href="#" style="float: left;">'+item.articleTitle+'</a>'+
										'</div>'+
										'<div class="indexArticleItemNicknameDiv">'+
											'<span style="float: left;">'+ 'userNickname' +'</span>'+
											'<span style="float: right;">'+ '2012-11-11 13:43:01'+'</span>'+					
										'</div>'+
									'</div>'+
								'</div>'+
							'</div>'+
							'<div class="margin_5"></div>';
					}
					$('#indexArticleListDiv').html(articleSummary);
				}
				else {
					$('#indexArticleListDiv').html('当前过滤信息下，暂时没有话题帖子！');
				}
}

</script>